<template>
    <div class="form_modal">
      <el-dialog
        :visible.sync="modal1"
        center
        :before-close="handleClose">
        <div class="modal_title"> <span> {{title_name}} </span></div>
        <el-form :model="formData" :rules="rules" ref="formData" label-width="120px">

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item v-if="title_name == '出库设备' || title_name == '销售设备'" label="设备名称:" prop="deviceName">
                <el-input v-model="formData.deviceName" :readonly="true" placeholder="请输入设备名称" style="width:100%"></el-input>
              </el-form-item>
              <el-form-item v-if="title_name == '出库设备' || title_name == '销售设备'" label="设备状态:" prop="deviceStatus">
                <el-select v-model="formData.deviceStatus" :readonly="true" placeholder="请选择设备状态" >
                  <el-option :value="0" :disabled="title_name !== '出库设备'" label="库存"> 库存 </el-option>
                  <el-option :value="1" disabled label="销售"> 销售 </el-option>
                  <el-option :value="2" disabled label="安装"> 安装 </el-option>
                  <el-option :value="3" disabled label="返库"> 返库 </el-option>
                  <el-option :value="4" :disabled="title_name !== '销售设备'" label="出库"> 出库 </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="title_name == '出库设备' || title_name == '销售设备'" label="IMEI:" prop="imei">
                <el-input v-model="formData.imei" :readonly="true" placeholder="请输入IMEI" style="width:100%"></el-input>
              </el-form-item>
              
               <el-form-item v-if="title_name == '批量销售设备' || title_name == '销售设备'" label="项目:" prop="projectId">
                <el-select v-model="formData.projectId" placeholder="请选择项目" style="width:100%" filterable>
                  <el-option v-for="(item, index) in projects" :key="index" :value="item.projectId" :label="item.projectName"> {{item.projectName}} </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="title_name == '批量出库设备' || title_name == '出库设备'" label="客户:" prop="userId">
                <el-select v-model="formData.userId" placeholder="请选择客户" style="width:100%" filterable>
                  <el-option v-for="(item, index) in customers" :key="index" :value="item.userId" :label="item.userName"> {{item.userName}} </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="备注:" prop="remarks">
                <el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 设备 穿梭框 组件-->
            <el-form-item v-if="title_name == '批量出库设备' || title_name == '批量销售设备'" prop="imeis" label="设备:">
              <el-transfer
                class="customTransfer"
                style="width: 100%"
                filterable
                :titles="title_name === '批量出库设备' ? ['库存设备', '出库设备'] : ['已出库设备' , '销售设备']"
                filter-placeholder="请输入设备标识"
                v-model="formData.imeis"
                :data="transferData">
              </el-transfer>
            </el-form-item>
          <el-row >
          </el-row>

        </el-form>
        <!-- 保存--取消按钮 -->
        <el-row :gutter="24" type="flex" justify="end">
          <el-col :span="4">
            <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="handleClose('formData')">取 消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
</template>

<script>
import { searchCity} from '@/api/home.js'
import { loadProjectList, loadCustomerProList } from '@/api/myProject'
import { loadAllCustoms, loadAllOutboundDevice, allStoreDevice  } from '@/api/device.js' 

export default {
    props:['detail', 'title', 'multiData'],
    data(){
      return {
        transferData: [],
        projects: [],
        customers: [],
        title_name: '',
        modal1: false,
        formData: {
          deviceName: '',
          deviceStatus: 0,
          imei: '',
          deviceStatus: null,
          userId:'',
          remarks: '',
          imeis:[]
        },
        rules: {
          // deviceName: [
          //     { required: true, message: '设备名称!', trigger: 'blur' },
          //     { type: 'string', max: 50, message: '不能超过50个字符', trigger: 'blur' },
          // ],
          projectId: [
            { required: true,  message: '项目不能为空！', trigger: 'blur' },
          ],
          userId: [
            { required: true,  message: '客户不能为空！', trigger: 'blur' },
          ],
          imei: [{ required: true, message: '设备编码不能为空！', trigger: 'blur' }],
          imeis: [{ required: true, message: '设备编码不能为空！', trigger: 'blur' }],
          // versionRemark: [{ required: true, message: '版本描述不能为空！', trigger: 'blur' }],
          // deviceRemark: [{ required: true, message: '设备备注不能为空！', trigger: 'blur' }],
          // remark: [{ required: true, message: '设备中文描述不能为空！', trigger: 'blur' }],
        },
      }
    },
    methods:{
      //提交
      submitForm(form) {
        console.log(this.formData, 'this.formData')
          this.$refs[form].validate((valid) => {
              if (valid) {
                let _projectName
                this.projects.map(v => {
                  if(v.projectId === this.formData.projectId){
                      _projectName = v.projectName
                  }
                })
                if(this.title_name == '销售设备'){
                  this.$emit('submit', { 
                    imeis: [{ imei: this.formData.imei}],
                    deviceStatus: 1, 
                    projectName: _projectName,  
                    projectId: this.formData.projectId, 
                    userId: this.$store.state.user.id,
                    userName: this.$store.state.user.account 
                  })
                } 
                if(this.title_name == '批量销售设备'){
                  this.$emit('submit', { 
                    deviceStatus: 1, 
                    projectName: _projectName,  
                    projectId: this.formData.projectId, 
                    imeis: this.formData.imeis.map(v => ({imei: v})),
                    userId: this.$store.state.user.id,
                    userName: this.$store.state.user.account 
                  })
                } 

                if(this.title_name == '出库设备'){ 
                  let userName = ''
                  this.customers.map(v => {
                    if(v.userId === this.formData.userId){
                      userName = v.userName
                    }
                  })
                  console.log(this.formData.imei, 'this.formData.imei')
                  this.$emit('submit', { 
                    deviceStatus: 4, 
                    userName: userName, 
                    userId: this.formData.userId, 
                    imeis: [ { imei: this.formData.imei }]
                  })
                }

                if(this.title_name == '批量出库设备'){ 
                  let userName = ''
                  this.customers.map(v => {
                    if(v.userId === this.formData.userId){
                      userName = v.userName
                    }
                  })

                  // userId: data.userId, 
                  // userName:  data.userName,
                  // imeis: [...data.imeis].map(v => ({ imei: v})),
                  // deviceStatus: data.deviceStatus
                  this.$emit('submit', { 
                    deviceStatus: 4, 
                    userName: userName, 
                    userId: this.formData.userId, 
                    imeis: this.formData.imeis.map(v => ({ imei: v}))
                  })
                }
                this.modal1 = false
              } else {
                return false;
              }
          });
      },
      // 取消
      handleClose(form){
        this.modal1 = false;
        // this.$refs[form].resetFields(); //重置清空
      }
    },
    watch:{
      detail: function (val) {
        if(val){
          this.formData = {
            imei: val.imei,
            projectId: null,
            deviceName: val.deviceName,
            deviceStatus: val.deviceStatus
          }
          console.log(this.formData, 'this.formData')
        }
      },
      modal1: function(val){
        console.log(this.title_name , "批量销售设备")
        if(val){
          if(this.title_name === '批量出库设备'){
            allStoreDevice({
              status: this.$store.state.user.userInfo.status,
              userName: this.$store.state.user.account,
              deviceStatus: 0
            }).then(res => {
              if(res.statusCode === "200"){
                this.transferData = res.data.map(v => ({ key: v.imei, label: v.imei}))
              }
            }).catch()
            // if(this.multiData && this.multiData.length > 0){
            //   console.log(this.multiData, 'this.multiData')
            //   this.transferData = this.multiData.map(v => ({ key: v.imei, label: v.imei}))
            // }
            loadAllCustoms({userName: this.$store.state.user.account}).then(res => {
              this.customers = res.data
            })
          } 
          if(this.title_name === '出库设备') {
            loadAllCustoms({userName: this.$store.state.user.account}).then(res => {
              this.customers = res.data
            })
          }

          if(this.title_name === '销售设备'){
            loadProjectList({
              userId: this.$store.state.user.id,
              status: this.$store.state.user.userInfo.status,
              accountType: this.$store.state.user.userInfo.accountType
            }).then(res => {
              this.projects = res.data
            }).catch()
          }
          if(this.title_name === '批量销售设备'){
            loadCustomerProList({
              userId: this.$store.state.user.id,
              userName: this.$store.state.user.account
            }).then(res => {
              if(res.statusCode === "200"){
                this.projects = res.data.content
              }
            }).catch()
            loadAllOutboundDevice({
              deviceStatus: 4, 
              userId: this.$store.state.user.id
            }).then(res => {
              if(res.statusCode === "200"){ 
                this.transferData = res.data.map(v => ({ key: v.imei, label: v.imei}))
              }
            })
          }

          if(this.detail){

          }else{
            this.formData = {
              projectId: null
            }
          }
        }
      }
    }
}
</script>

<style >
.customTransfer .el-transfer-panel {
  width: 250px;
}
  /* @import url('../../assets/css/dialog.css'); */
</style>

